<template>
	<public-view navType="station" topBgShow="2" navTitle="加油站管理" @clickQrCode="showQrCode">
		<view class="content">
			<view class="flex f-d-c w-100" style="transition: all .3s ease-out;" :class="!is_download?'opac1':'opac0'">
				<view class="jiayouzhan-box flex j-c-c">
					<!-- <uni-image class="bg-image" src="@/static/images/jiayouzhan.svg" :lazy-load="true">
					</uni-image> -->
					<image class="bg-image" :lazy-load="true" src="@/static/images/jiayouzhan.png" mode=""></image>
					<view class="info-voew">
						<view class="top flex a-i-c color-fff80 f-s-24 l-h-34">
							<image class="log-icon" src="@/static/images/my/rechange2.svg" mode=""></image>
							我的总收入
						</view>
						<view class="money-boew color-fff">
							<text class="f-s-24">￥</text>
							<text class="f-s-64 l-h-88">{{page_data.income||0}}</text>
						</view>
						<view class="color-fff80 f-s-24 ready-money">
							可提现余额：¥{{page_data.money||0}}
						</view>
						<view class="postmoney-btn all-center color-F25454 f-s-32 f-w-b"
							@click="goTo({url:'/pages/my/withdrawal?type=merchant&id='+page_data.id})">
							提现
						</view>
					</view>
				</view>
				<view class="all-order-number f-s-30">
					总消费订单<text class="order-num">{{total||0}}</text>单
				</view>
				<view class="log-list">
					<block v-for="(item, index) in list" :key="index">
						<log-box :item="item"></log-box>
					</block>
				</view>
				<view class="color-878787 f-s-24 nomore">
					没有查询到更多数据
				</view>
			</view>
			<view class="qrcode-view flex f-d-c a-i-c" :class="is_download?'right0':'right-750'"
				@click="is_download = !is_download">
				<image class="qrcode" :src="page_data.qr_code" mode=""></image>
				<view class="download-btn all-center f-s-30 color-fff" @click.stop="saveQrCode">
					保存二维码
				</view>
			</view>
		</view>
	</public-view>
</template>

<script>
	import lobBox from "@/components/myComponents/logBox.vue"
	import {
		goTo
	} from "@/nav.js"
	export default {
		components: {
			"log-box": lobBox
		},
		data() {
			return {
				is_download: false,
				page_data: {},
				list: [],
				total: 0
			};
		},
		onLoad() {
			// console.log(this.$store.state.join_page_json)
			this.page_data = JSON.parse(this.$store.state.join_page_json)
			this.getUserLog()
			// console.log(this.page_data)
		},
		methods: {
			goTo,
			getUserLog() {
				let that = this
				that.util.postRequest({
					url: "v1/merchant/gasoline_order",
					data: {
						merchant_id: this.page_data.id
					}
				}).then(res => {
					console.log(res)
					that.list = res.data.data
					that.total = res.data.total
				})
			},
			saveQrCode() {
				let that = this
				uni.showLoading({
					title: "下载中..."
				})
				let task = uni.downloadFile({
					url: that.page_data.qr_code,
					success(res) {
						console.log(res)
						// uni.getFileSystemManager().saveFile({
						// 	tempFilePath:res.tempFilePath,
						// 	success(sres) {
						// 		console.log(sres)
						// 		uni.showToast({
						// 			title:"下载成功"
						// 		})
						// 	}
						// })
						uni.saveVideoToPhotosAlbum({
							filePath: res.tempFilePath,
							success() {
								uni.showToast({
									title: "下载成功"
								})
							}
						})
					},
					complete() {
						uni.hideLoading()
					},
				})
				// task.onProgressUpdate((res) => {
				// 	console.log('下载进度' + res.progress);
				// 	console.log('已经下载的数据长度' + res.totalBytesWritten);
				// 	console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
				// 	if(res.progress>=100){
				// 		uni.hideLoading()
				// 	}else{
				// 		uni.showLoading({
				// 			title:"已下载"+res.progress+'%'
				// 		})
				// 	}
				// });
			},
			showQrCode() {
				this.is_download = !this.is_download
			}
		}
	}
</script>

<style lang="scss" scoped>
	.right0 {
		left: 0;
		opacity: 1;
	}

	.right-750 {
		left: -750upx;
		opacity: 0;
	}

	.opac0 {
		opacity: 0;
	}

	.opac1 {
		opacity: 1;
	}

	.qrcode-view {
		width: 750upx;
		padding-top: 164upx;
		position: absolute;
		z-index: 4;
		transition: all .3s ease-out;
		top: 0;

		.download-btn {
			width: 712upx;
			height: 96upx;
			background: #F32E2E;
			border-radius: 128upx;
		}

		.qrcode {
			width: 384upx;
			height: 384upx;
			margin-bottom: 402upx;
			background-color: #999999;
		}
	}

	.nomore {
		margin: 68upx 0;
		text-align: center;
	}

	.log-list {
		width: 100%;
		padding: 0 40upx;
	}

	.all-order-number {
		padding: 0 60upx;
		margin-bottom: 28upx;
		line-height: 42upx;

		.order-num {
			margin-left: 22upx;
			color: #F32E2E;
		}
	}

	.jiayouzhan-box {
		width: 750upx;
		height: 424upx;
		position: relative;

		.info-voew {
			width: 670upx;
			height: 354upx;
			padding: 40upx 0 30upx 38upx;
			position: relative;
			z-index: 2;

			.postmoney-btn {
				width: 144upx;
				height: 64upx;
				background: #FFFFFF;
				border-radius: 70upx;
			}

			.ready-money {
				margin-bottom: 28upx;
				line-height: 34upx;
			}

			.money-boew {
				margin-bottom: 20upx;
			}

			.top {
				margin-bottom: 14upx;

				.log-icon {
					width: 32upx;
					height: 32upx;
					margin-right: 12upx;
				}
			}
		}

		.bg-image {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 1;
			top: 0;
			left: 0;
		}
	}

	.content {
		width: 750upx;
		padding-top: 24upx;
		position: relative;
	}
</style>